iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

從零開始打造網頁遊戲-造輪子你也辦的到!系列 第 25

Chapter5 終於要來從零打造-Canvas網頁遊戲-之行前說明書

  • 分享至 

  • xImage
  •  

前言

其實我算蠻容易分心的,說好要搞流程圖,結果都在打code;說好要做遊戲,結果都在搞動畫;雖然列了大綱,中途還是更換了幾個主題,臨時起意去畫樹,不過,這樣的彈性對我來說,在於我可以隨時調整當下的內容,也因此前四個章節共花了24天才各有收尾,接下來還有6天的時間,顯然沒法完成起初的規劃,那麼應對方案就是在第五章節能夠完成一個斷點,鐵人賽結束後,再思考其他形式的續篇吧!

這段日子以來,循序漸近經歷了不少:
CH1 Canvas音樂播放器
CH2 Canvas動畫入門
CH2 Canvas動畫基礎
CH3 Binary Tree
CH4 Canvas背景動畫

關於造輪子

當初下這個標題也許有些狂妄吧,身為業餘玩家,也沒有進過遊戲產業,只是對於coding蠻有熱忱的,也說不上來自己到底懂不懂programming,不過,多少想幫助那些和我一樣的人吧,不甘心於使用框架和工具,如果學會怎麼使用,卻一點靈感和想法都沒有,這不是很可惜嗎?對我來說,造輪子的點在於創造,創造本身就是一種價值。

起初,只是為了完成一個功能而做,
接著考慮把相似的功能進行複製,
然後發現程式碼亂到不行,逐漸改變作法,
最後追求簡潔好看的程式碼。

前期有意地,想把這個過程帶給大家吧,畢竟,仔細回想當初我的確有看過物件的一些文章,在學Class的時候也會稍微接觸到,但我從來沒想過物件能帶給我這麼大的幫助,

說來好笑,我當年第一個版本的落葉動畫,用的是Class,卻一點物件的觀念都沒有,仍然把各種屬性設計成陣列,比如x陣列、y陣列,刪除動畫的時候要把每個屬性進行迭代,把陣列從刪除點拆成兩份、再合併,這個動作有幾個屬性就要做幾次,雖然視覺上也很好看了,不過程式碼真是...摁難以言喻。
PPT歌詞投影片 王力宏-落葉歸根

以J和K來控制頁面播放
善用數字12345來快速轉場(跳頁)

想必大家都經歷過那個,用程式碼行數來比較厲害程度,覺得自己寫了1000行的code,就超級威猛的年紀吧xd

那麼該如何收尾呢

時間我想還是充裕的,來說明一下目前的計畫吧!遊戲場景設定在一顆秋天的樹下,會隨著音樂使其樹葉不斷飄落,玩家的目標是要蒐集那些落葉,不讓它們飛走,如此一來就能讓落葉回歸土壤,再次成為這顆樹的養分,途中也會因為樹葉越來越少,使得樹開始變得光禿禿(跟曲目的長度有關),這裡面就會陸續把前四個章節的功能整合起來。

還有準備一個小支線,每次遊玩後所蒐集到的落葉,都會聚集到這個房間,可以拿來交換一些道具,並且在這個房間能控制風來吹動落葉,看著自己努力收集而來的葉子四處逃竄在畫面中紛飛,應該很有成就感吧XD。

完成以上後,如果還有時間的話

  1. 想增加以網址設定曲子的功能,要再研究有哪些網站願意提供免費的音樂庫
  2. 用cookie儲存玩家曾玩過的曲子和分數
  3. 尋找適合的音效

上一篇
Chapter4 附錄 貝茲曲線
下一篇
Chapter5 - 當一個勤勞的園丁,來修剪我們美麗的樹(I)Canvas繪圖 Y型樹枝(愛心型) + 控制分支的變化
系列文
從零開始打造網頁遊戲-造輪子你也辦的到!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言